@import "@wordpress/base-styles/breakpoints";

%list-actions-bar {
	margin-bottom: 57px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;

	.search-component {
		min-width: min(400px, 100%);
		flex: 1;
	}

	.list-actions-bar__spacer {
		flex: 1;
	}

	.list-actions-bar__filter-control {
		min-width: 115px;

		&.select-dropdown,
		.select-dropdown__header {
			height: 48px;
		}

		.select-dropdown__item.is-selected {
			background-color: var(--color-primary);
		}

		.gridicon {
			margin-left: 10px;
		}
	}

	.subscription-manager-sort-controls {
		flex-grow: 0;
	}

	@media (max-width: $break-small) {
		.list-actions-bar__filter-control,
		.subscription-manager-sort-controls {
			&__button {
				padding: 0;
			}
		}
		.subscription-manager-sort-controls {
			&__button {
				margin-top: -6px;
			}
		}
	}
}

